<template>
	<div class="">
		<div class="progress">
		  	<div class="arrow-box" :style="progressStyle"></div>
		</div>
		<div class="col-sm-offset-2 col-sm-8">
			<course v-show="term === 0"></course>
			<exam-type v-show="term === 1"></exam-type>
			<problem-number v-show="term === 2"></problem-number>
			<questype v-show="term === 3"></questype>
		</div>
		<form-in-all v-show="term === 4"></form-in-all>
	</div>
</template>

<script>
	import { mapGetters, mapActions, mapState, mapMutations } from 'vuex'
	
	import Course from './Course.vue'
	import ExamType from './ExamType.vue'
	import ProblemNumber from './ProblemNumber.vue'
	import Questype from './Questype.vue'
	import FormInAll from './FormInAll.vue'

	export default {
	  	name: 'Selection', // global id
	    computed: {
	    	...mapState('pages/exam/new', [
				'term',
	    	]),
	    	...mapGetters([
	    		'user/logged',
	    	]),
	    	progressStyle() {
	    		let term = this.term;
				return {
					width: (100 * (term + 1) / 5) + '%',
				}
			},
	    },
	    components: {
	    	Course,
			ExamType,
			ProblemNumber,
			Questype,
			FormInAll,
	    },
  	}

</script>

<style scoped>

	.progress {
		height: 20px;
		width: 100%;
		border-radius: 10px;
	}
	.arrow-box {
		height: 100%;
		width: 50%;
		position: relative;
		background: #337ab7;
	}
	.arrow-box:after {
		left: 100%;
		top: 50%;
		border: solid ;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
		border-color: rgba(136, 183, 213, 0);
		border-left-color: #337ab7;
		border-width: 30px;
		margin-top: -30px;
	}

	.whitespace {
		margin-right: 5px;
	}
</style>
